<template>
	<div class="cl-cantainer container">
		<div class="row">
			<div class="col-md-9 cl-left">

				<div class="cl-artical-content">
					<h2 class="cl-artical-title">{{ article.article_title }}</h2>
					<div class="cl-card-tag">
						<div><span>{{ commentLength }}</span>人评论 /
							发布时间：<span>{{ article.add_time | formatTime }}</span>
						</div>
					</div>
					<div class="cl-artical" v-html="article.content"></div>
				</div>

				<div id="comment" class="comment">
					<form class="cl-comment-from">
						<input type="hidden" id="article_id" v-model="newComment.article_id" />
						<div><textarea id="comment_content" placeholder="说点什么吧..." rows="2" v-model.lazy="newComment.comment_content"></textarea></div>
						<input id="email" type="text" placeholder="邮箱" v-model.lazy="newComment.email" />
						<input id="nickname" type="text" placeholder="昵称" v-model.lazy="newComment.nickname" />
						<button type="button" id="comment-btn" @click="addComment()">留言</button>
						<span class="clearfix"></span>
						<span style="color: red; padding: 5px 5px;">{{ tips }}</span>
					</form>

					<h4 class="right-card-title" id="right-card-title">全部评论</h4>

					<div class="comment-panel" v-for="item in commentList" :key='item.comment_id'>
						<div class="comment-panel-portrait">
							<img :src="PortraitPNG" class="img-fluid rounded-circle" alt="">
						</div>
						<div class="comment-panel-content">
							<div class="comment-panel-content-item">
								<div class="comment-author">{{ item.nickname }}</div>
								<div>{{ item.add_time | formatTime }}</div>
							</div>
							<div class="comment-panel-content-main">{{ item.comment_content }}</div>
						</div>
						<span class="clearfix"></span>
						<div class="text-primary"><a href="">回复</a></div>
					</div>
				</div>

			</div>
			<co-middle-right></co-middle-right>
		</div>
	</div>
</template>

<script>
	import MiddleRight from "./MiddleRight.vue"
	import axios from "axios"
	import PortraitPNG from "../assets/img/portrait.png"
	
	export default {
		name:'MiddleDetail',
		data:function(){
			return {
				PortraitPNG:PortraitPNG,
				article: {article_title: "article_title", add_time: 0, content: "content"},
				article_id:0,
				newComment: {comment_content: "", nickname: "", email: "", article_id: 0},
				newCommentTpl: {comment_content: "", nickname: "", email: "", article_id: 0},
				commentList: [],
				tips:''
			}
		},
		created: function () { // 表示的时候vue初始化会执行这个方法。
			// this.article_id = getQueryParam('article_id');
			this.article_id = this.$route.query.article_id;
			this.newComment.article_id = this.article_id;
			
			let _this = this;
			
			axios.get('http://localhost:8901/api/article/detail/?article_id=' + this.article_id)
				.then(function (response) {
					if (response.data.status == 0) { // 服务端成功处理
						_this.article = response.data.data.article;
						_this.$parent.categoryId = response.data.data.article.category_id;
						
					} else {
						alert("获取文章失败，具体信息：" + response.data.message);
					}
				})
				.catch(function (error) {
					console.log(error);
				});
			axios.get('http://localhost:8901/api/comment/list/?article_id=' + this.article_id)
				.then(function (response) {
					if (response.data.status == 0) { // 服务端成功处理
						_this.commentList = response.data.data.commentList;
					} else {
						alert("获取评论失败，具体信息：" + response.data.message);
					}
				})
				.catch(function (error) {
					console.log(error);
				});
		},
		methods: {
			addComment: function () {
				let _this = this;
		
				let params = new URLSearchParams();
				for (let i in _this.newComment) {
					params.append(i, _this.newComment[i]);
				}
				axios.post("http://localhost:8901/api/comment/add/", params)
					.then(function (response) {
						console.log(response);
						if (response.data.status == 0) { // 服务端成功处理
							_this.commentList.unshift(response.data.data.comment);
							_this.newComment = _this.newCommentTpl;
						} else {
							alert("增加评论失败，具体信息：" + response.data.message);
						}
					}).catch(function (error) {
					console.log(error);
				});
			}
		},
		watch: {
			'newComment.comment_content': function (newValue) {
				if (newValue.length != 0 && (newValue.length < 2 || newValue.length > 500)) {
					this.tips = "评论内容长度在2~500之间。";
				} else {
					this.tips = "";
				}
			},
			'newComment.email': function (newValue) {
				if (newValue.length != 0 && (newValue.length < 3 || newValue.length > 100)) {
					this.tips = "邮箱长度在3~100之间。";
				} else {
					this.tips = "";
				}
			},
			'newComment.nickname': function (newValue) {
				if (newValue.length != 0 && (newValue.length < 1 || newValue.length > 20)) {
					this.tips = "昵称长度在1~20之间。";
				} else {
					this.tips = "";
				}
			}
		},
		computed: {
			commentLength: function () {
				return this.commentList.length;
			}
		},
		filters: {
			formatTime: function (time) { //
				let date = new Date(time * 1000);
				let year = date.getFullYear();
				let month = (date.getMonth() + 1).toString().padStart(2, '0');
				let day = date.getDate().toString().padStart(2, '0');
				let hour = date.getHours().toString().padStart(2, '0');
				let minute = date.getMinutes().toString().padStart(2, '0');
				let second = date.getSeconds().toString().padStart(2, '0');
				return year + "-" + month + "-" + day + " " + hour + ":" + minute + ":" + second;
			}
		},
		components:{
			'co-middle-right':MiddleRight
		}
	}
</script>

<style>
</style>
